<template>
  <div class="page-container">
    <div class="chat-app">
      <div class="chat-header">
        <h2>客服聊天</h2>
      </div>

      <div class="chat-messages" ref="messagesContainer">
        <div
            v-for="(message, index) in messages"
            :key="index"
            class="message"
            :class="{ 'user-message': message.sender === 'user', 'service-message': message.sender === 'service' }"
        >
          <div class="message-content">
            <div class="message-text" v-if="message.type === 'text'">{{ message.content }}</div>
            <el-image
                v-else-if="message.type === 'image'"
                :src="message.content"
                :preview-src-list="[message.content]"
                fit="cover"
                class="message-image"
                hide-on-click-modal
            />
            <div class="message-time">{{ formatTime(message.time) }}</div>
          </div>
        </div>
      </div>

      <div class="chat-footer">
        <div class="page-info">第 8 页</div>
        <div class="divider"></div>
        <div class="input-area">
          <el-input
              v-model="inputMessage"
              placeholder="请输入消息"
              @keyup.enter="sendMessage"
              class="message-input"
          />
          <div class="action-buttons">
            <el-upload
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleImageChange"
            >
              <el-button type="primary" :icon="Picture" circle class="action-button" />
            </el-upload>
            <el-button type="primary" @click="sendMessage" :icon="Promotion" class="action-button" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { Picture, Promotion } from '@element-plus/icons-vue'

// 消息列表
const messages = ref([
  {
    sender: 'service',
    type: 'text',
    content: '您好，请问有什么可以帮您？',
    time: new Date(Date.now() - 120000)
  },
  {
    sender: 'user',
    type: 'text',
    content: '我有一个问题需要咨询',
    time: new Date(Date.now() - 60000)
  },
  {
    sender: 'service',
    type: 'text',
    content: '我们已经收到您的消息，将尽快为您处理。',
    time: new Date()
  }
])

// 输入消息
const inputMessage = ref('')

// 消息容器引用
const messagesContainer = ref(null)

// 格式化时间
const formatTime = (time) => {
  return time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim()) return

  messages.value.push({
    sender: 'user',
    type: 'text',
    content: inputMessage.value.trim(),
    time: new Date()
  })

  inputMessage.value = ''
  scrollToBottom()

  // 模拟客服回复
  setTimeout(() => {
    messages.value.push({
      sender: 'service',
      type: 'text',
      content: '感谢您的咨询，我们会尽快为您解决问题。',
      time: new Date()
    })
    scrollToBottom()
  }, 1000)
}

// 处理图片上传
const handleImageChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    messages.value.push({
      sender: 'user',
      type: 'image',
      content: e.target.result,
      time: new Date()
    })
    scrollToBottom()

    // 模拟客服回复
    setTimeout(() => {
      messages.value.push({
        sender: 'service',
        type: 'text',
        content: '图片已收到，我们会尽快处理。',
        time: new Date()
      })
      scrollToBottom()
    }, 1000)
  }
  reader.readAsDataURL(file.raw)
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 初始化时滚动到底部
onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.chat-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-header {
  padding: 16px;
  background-color: #409eff;
  color: white;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.message {
  margin-bottom: 16px;
  display: flex;
}

.message-content {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 8px;
  position: relative;
}

.user-message {
  justify-content: flex-end;
}

.user-message .message-content {
  background-color: #409eff;
  color: white;
  border-top-right-radius: 0;
}

.service-message {
  justify-content: flex-start;
}

.service-message .message-content {
  background-color: white;
  border: 1px solid #ebeef5;
  border-top-left-radius: 0;
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  text-align: right;
}

.message-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 4px;
  cursor: pointer;
  display: block;
}

.chat-footer {
  padding: 16px;
  background-color: white;
  border-top: 1px solid #ebeef5;
  flex-shrink: 0;
}

.page-info {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 8px 0;
}

.input-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-input {
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-button {
  width: 40px;
  height: 40px;
}
</style>